<template>
  <view class="add-group-chat">
    <view class="add-group-chat-box">
      <view class="group-chat-item">
        <view
          class="group-chat-item-btn"
          v-if="detailsId === 1"
        >
          <view
            class="item-btn"
            :class="{ active: isGroupChat === 1 }"
            @click="handleGroupChat(1)"
            >我管理的群组
          </view>
          <view
            class="item-btn"
            :class="{ active: isGroupChat === 2 }"
            @click="handleGroupChat(2)"
            >我加入的群组
          </view>
        </view>
        <view class="group-chat-item-content">
          <view class="group-chat-list">
            <view
              class="group-chat-list-item"
              v-for="item in 5"
              :key="item"
            >
              <img
                src="https://img.alicdn.com/imgextra/i1/1034622205/O1CN01Wq0djF1S9wNR3sp4K_!!1034622205.png"
                alt=""
              />
              <text>技术部人事</text>
              <text>(11)</text>
              <nut-tag
                v-if="detailsId === 1"
                round
                type="primary"
                >全员</nut-tag
              >
            </view>
          </view>
        </view>
      </view>
    </view>
  </view>
</template>

<script setup lang="ts">
import { ref } from "vue";
const props = defineProps(["detailsId"]);
const detailsId = ref(props.detailsId);
const isGroupChat = ref(1);
const handleGroupChat = (type: number) => {
  isGroupChat.value = type;
};
</script>

<style lang="less">
@import "./index.less";
</style>
